import React, {Component} from 'react'
import {inject, observer} from 'mobx-react';
import { toJS} from 'mobx';
import {Spin, message, Modal, Button} from 'antd';

import '../../../../style/myBlog/rightContainer/weibo.less'

import { WeaLocaleProvider, WeaBrowser, WeaHelpfulTip} from 'ecCom'
import "./WeiboEdit.less"
import WeaUtils from "../../../Component/wea-utils"
const {DateFormat} = WeaUtils
import isEmpty from "lodash/isEmpty";
import CubeLayout from "../../../../../govern/components/E9/cubeLayout";
import ComVar from "../ComVar";
import Mood from "./Mood";
import WeiboEdit from "./WeiboEdit";
const { ComeFrom} = ComVar
const getLabel = WeaLocaleProvider.getLabel;



@inject('blogMyBlog')
@observer

class WeiboEcmeEdit extends Component {
    constructor(props) {
        super(props);

        this.state={
            cubeLayoutParame:{},
            spinning:true,
            partid:0,
            Card:{},
            isCanSave:false,
            mood:'1',
            showRich:false,
            ecmeDefaultTemplate:"",
            viewShareType:'1',
            shareValue:'',
            viewShareShow: {display:'none'},
            showBdShare:0
        }
    }
    componentDidMount(){

        const {ecmeTemplateid} = this.props;
     const {getBlogNoteEcmeinfo,getEcmeTemlate} = this.props.blogMyBlog;



     if(ecmeTemplateid){
         getEcmeTemlate({templateId:ecmeTemplateid},result => {
             
             this.setState({cubeLayoutParame:result.data,partid:result.partid});
         })
     }else{
         getBlogNoteEcmeinfo({},result => {
            
             let cubeFlags=false;
             if(!isEmpty(result.data)){
                 cubeFlags  = Object.keys(toJS(result.data)).length > 0;
             }
             if(cubeFlags){
                 this.setState({cubeLayoutParame:result.data,partid:result.partid});
             }

         })
     }



    }


    initCallBack=()=>{
     this.setState({spinning:false})
    }


    componentWillUnmount(){

    }

    saveBlogNoteEcme = () => {

        const {partid,cubeLayoutParame} =this.state;
        let {Card,setDisabled,saveBlogNoteEcmeinfo} = this.props.blogMyBlog;
        let ecmeExtend = {};
        if (Object.keys(cubeLayoutParame).length > 0) {//建模布局保存方法
            const { ecmeDoSubmit } = Card.Actions;
            ecmeDoSubmit().then((data) => {
                if(data==undefined||!data){
                    return ;
                }

                message.loading(getLabel(519578,'正在保存中...') , 20);
                ecmeExtend= data.JSONStr.extendDatas;
                let nowworkdate = DateFormat(new Date(), "yyyy-MM-dd");
                typeof setDisabled === 'function' && setDisabled(true);
                let params = {
                    ecmeExtend: JSON.stringify(ecmeExtend),
                    workdate: nowworkdate,
                    partid:partid
                }
                saveBlogNoteEcmeinfo(
                    params,
                    result => {
                        message.destroy();
                        message.success(getLabel(83885,"操作成功！"));
                    }
                )
            })
             }
    }

    publishBlogEcme = (callback = false) => {
        let {Card,setDisabled,saveBlogEcmeInfo} = this.props.blogMyBlog;
         let {cubeLayoutParame,partid,viewShareType,shareValue} = this.state;
        let ecmeExtend = {};
        if (Object.keys(cubeLayoutParame).length > 0) {//建模布局保存方法
            const { ecmeDoSubmit } = Card.Actions;
            ecmeDoSubmit().then((data) => {
                this.setState({spinning:true});
                if(data==undefined||!data){
                    this.setState({spinning:false});
                    return ;
                }

                ecmeExtend= data.JSONStr.extendDatas;


               let nowworkdate = DateFormat(new Date(), "yyyy-MM-dd");
                typeof setDisabled === 'function' && setDisabled(true);
                let params = {
                    ecmeExtend: JSON.stringify(ecmeExtend),
                    appItemId: this.state.mood,
                    comefrom: ComeFrom.pc,
                    workdate: nowworkdate,
                    partid:partid,
                    shareType:viewShareType,
                    shareValue:shareValue,
                }
                saveBlogEcmeInfo(
                    params,
                    result => {
                        let cubeFlags=false;
                        if(!isEmpty(result.ecmeParams.data)){
                            cubeFlags  = Object.keys(toJS(result.ecmeParams.data)).length > 0;
                        }
                        if(cubeFlags){
                            this.setState({cubeLayoutParame:result.ecmeParams.data});
                        }

                        if (result.isopen == true) {
                            this.setState({spinning:false});
                            setTimeout(() => {
                                setDisabled(false)
                            }, 1000)
                        }
                    }
                )
            })
        }
    }


    onTempletChange = (name, ids, list, type) => {
           const {getEcmeTemlate} = this.props.blogMyBlog;

        Modal.confirm({
            title: getLabel(505615,'替换当前内容？'),
            onOk: () => {
                if(list[0]&&list[0].contentType==1){
                    getEcmeTemlate({templateId:name},result => {
                        this.setState({cubeLayoutParame:result.data,partid:result.partid});
                    })
                }else{
                    this.setState({showRich:true,ecmeDefaultTemplate:ids})
                }
            },
            onCancel: () => {

            }
        });



    }



    changeShowViewShare = () => {
        if(this.state.viewShareShow.display=='block'){
            this.setState({viewShareShow: {display:'none'}})
        }else{
            this.setState({viewShareShow: {display:'block'}})
        }
    }

    changeviewShareType = (val,ids) => {


        if(val==3||val==4){
            this.setState({viewShareType:val+""})
            return;
        }


        if(ids!=undefined&&ids!=''){
            this.setState({viewShareType:val+"",viewShareShow: {display:'none'},shareValue:ids})
        }else if(ids!=undefined&&ids==''){
            this.setState({viewShareType:1+"",viewShareShow: {display:'none'}})
        }else {
            this.setState({viewShareType:val+"",viewShareShow: {display:'none'}})
        }


    }

    render(){
        let cubeFlags= false;

        const {cubeLayoutParame,spinning,showRich,ecmeDefaultTemplate} =this.state;
       const {getCardStorefun,disabled,showbdshare} = this.props.blogMyBlog;
       if(!isEmpty(cubeLayoutParame)){
           cubeFlags  = Object.keys(toJS(cubeLayoutParame)).length > 0;
       }


       if(showRich){
           let {workdate,blogType,hasSubmited,defaultTemplate,weiboCKEditorConfig} = this.props;
          return <WeiboEdit ecId={`${this && this.props && this.props.ecId || ''}_WeiboEdit@55t6eg`}
               workdate={workdate}
               blogType={blogType}
               hasSubmited={hasSubmited}
               ecmeDefaultTemplate={ecmeDefaultTemplate}
               weiboCKEditorConfig={weiboCKEditorConfig}
           />
       }




        const {viewShareType} = this.state;



        let bd1Color = {'background-color':"white"};
        let bd2Color = {'background-color':"white"};
        let bd3Color = {'background-color':"white"};
        let bd4Color = {'background-color':"white","border-bottom":"1px solid #d7d7d7"};

        let viewShare = getLabel(2161,'公开') ;
        if(viewShareType=='1'){
            bd1Color = {'background-color':"#ecf7fe"};
        }else if(viewShareType=='2'){
            viewShare = getLabel(83281,'私密') ;
            bd2Color = {'background-color':"#ecf7fe"};
        }else if(viewShareType=='3'){
            viewShare = getLabel(521692,'谁可以看') ;
            bd3Color = {'background-color':"#ecf7fe"};
        }else if(viewShareType=='4'){
            viewShare = getLabel(525176,'不给谁看') ;
            bd4Color = {'background-color':"#ecf7fe","border-bottom":"1px solid #d7d7d7"};
        }



        let bdStyle ={position: "relative","float": "right", "right": 308, top: 14,"display":"none"};
        if(showbdshare==1){
            bdStyle ={position: "relative","float": "right", "right": 308, top: 14};
        }


        return (

            <div className="ecmeEditContainer" >
                <div style={{"height":12}}>
                </div>
                <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@r39dvb`} spinning={spinning} tip={getLabel(519579,'组件加载中') }>
            <div className='wea-ckeditor-import-ecCom' id="ecmeeditor" style={{"padding":"0 18px","min-height":"100px"}}>
                    {cubeFlags?(CubeLayout({cubeLayoutParame,"callback":this.initCallBack,"getCardStorefun":getCardStorefun})):""}
            </div>
            </Spin>

                <div className="ecmeEditBtn">
                    <div className="one_ecme_leftbtn">
                        <div className="wea-ecme-item">
                            <Mood ecId={`${this && this.props && this.props.ecId || ''}_Mood@ihjth6`} onSelect={mood => this.setState({mood})}/>
                        </div>
                        <div className="wea-ecme-item">
                            <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@cdxqya`}
                                customized={true}
                                type={"blogTemplate"}
                                title={getLabel(33144,"模板")}
                                hasAdvanceSerach={true}
                                isSingle={true}
                                onChange={this.onTempletChange}
                            >
                                <span className='wea-cbi-icon icon-blog-Task'/>
                                <span className="wea-cbi-text">  {getLabel(33144,"模板")}</span>
                            </WeaBrowser>
                        </div>
                    </div>
                    <div className="ecmeEdit ecme_blog" style={{"height": 35,"background-color": "white"}}>


                         <span className="wea-rich-text-toolbar-bottom-item" style={bdStyle}>
                    {viewShare}<span className='icon-coms-down' onClick={this.changeShowViewShare} style={{"font-size": "xx-small", "color":'#989a9c','margin-left':'10px',"cursor": "pointer"}}>
                    <WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@bk7m73`}
                                   width =  {260} //如果要自定义宽度，在这里设置
                                   title={getLabel(525177,'微博没有真正意义上的"私密",上级和后端指定共享人为固定共享,不可修改."谁可以看"和"不给谁看"均为排除固定共享之后的筛选.') }
                                   isCenter={true}
                                   style={{'margin-left': '10px', 'top': '2px', 'position': 'relative'}}
                                   placement = 'bottom'
                    /></span>
                     <div className='viewShareAll' style={this.state.viewShareShow}>
                         <div className='viewshareitem'  style={bd1Color} onClick={() => this.changeviewShareType(1)}>
                             <div className='viewshareitemicon'>
                               {viewShareType=='1'?<i className="icon-coms-Upload-successfully-o"/>:<i className="icon-coms-Upload-successfully-o" style={{"visibility": "hidden"}}/>}
                             </div>
                              <div className='viewshareiteminfo'>
                                  <span style={{"position": "relative","top": "-8px", "font-size":"14px"}}>{getLabel(2161,'公开') }</span>
                                  <span style={{"position": "relative","top": "10px","margin-left": "-28px",'color':"#838181","font-size":"12px"}}>{getLabel(525178,'所有共享人可见') }</span>
                              </div>
                         </div>
              <div className='viewshareitem' style={bd2Color}  onClick={() => this.changeviewShareType(2)}>
                   <div className='viewshareitemicon'>
                       {viewShareType=='2'?<i className="icon-coms-Upload-successfully-o"/>:<i className="icon-coms-Upload-successfully-o" style={{"visibility": "hidden"}}/>}
                   </div>
                              <div className='viewshareiteminfo'>
                                  <span style={{"position": "relative","top": "-8px", "font-size":"14px"}}>{getLabel(83281,'私密') }</span>
                                  <span style={{"position": "relative","top": "10px","margin-left": "-28px",'color':"#838181","font-size":"12px"}}>{getLabel(525179,'仅自己和固定共享人可见') }</span>
                              </div>
              </div>
              <div className='viewshareitem' style={bd3Color} >
                  <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@zum6ul`}
                              type="blogAttentionUsers"
                              textDecoration={true}
                              viewAttr={3}
                              inputStyle={{ width: 232 }}
                              onChange={(ids, names, datas) =>
                              {
                                  this.changeviewShareType(3,ids)
                              }}
                              title={getLabel(521692,'谁可以看')}
                              icon="icon-coms-blog"
                              customized={true}
                              isSingle={false}
                  >
                    <div className='viewshareitemicon'>
                        {viewShareType=='3'?<i className="icon-coms-Upload-successfully-o"/>:<i className="icon-coms-Upload-successfully-o" style={{"visibility": "hidden"}}/>}
                    </div>
                    <div className='viewshareiteminfobrw' onClick={() => this.changeviewShareType(3)}>
                       <span style={{"position": "relative","top": "-8px", "font-size":"14px"}}>{getLabel(521692,'谁可以看') }</span>
                       <span style={{"position": "relative","top": "10px","margin-left": "-56px",'color':"#838181","font-size":"12px"}}>{getLabel(525180,'指定共享人可见') }</span>
                    </div>
                  </WeaBrowser>
              </div>
              <div className='viewshareitem' style={bd4Color}  >
                  <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@o9xvo2`}
                              type="blogAttentionUsers"
                              textDecoration={true}
                              viewAttr={3}
                              inputStyle={{ width: 232 }}
                              onChange={(ids, names, datas) =>
                              {
                                  this.changeviewShareType(4,ids)
                              }}
                              title={getLabel(525176,'不给谁看')}
                              icon="icon-coms-blog"
                              customized={true}
                              isSingle={false}
                  >
                         <div className='viewshareitemicon' >
                             {viewShareType=='4'?<i className="icon-coms-Upload-successfully-o"/>:<i className="icon-coms-Upload-successfully-o" style={{"visibility": "hidden"}}/>}
                         </div>
                            <div className='viewshareiteminfobrw' onClick={() => this.changeviewShareType(4)}>
                               <span style={{"position": "relative","top": "-8px", "font-size":"14px"}}>{getLabel(525176,'不给谁看') }</span>
                               <span style={{"position": "relative","top": "10px","margin-left": "-56px",'color':"#838181","font-size":"12px"}}>{getLabel(525181,'指定共享人不可见') }</span>
                            </div>
                  </WeaBrowser>
              </div>
          </div>
                 </span>
                        <span className="wea-rich-text-toolbar-bottom-item" style={{position: "relative","visibility":"hidden"}}><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@j4wx1o`}/></span>
                        <span className="wea-rich-text-toolbar-bottom-item" style={{position: "relative","float": "right","line-height": 28,right:25,"padding":"9px 0 0 0"}}>
					<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@clbg5w`} className="ddddddddddddd" disabled={disabled} type="primary" onClick={this.publishBlogEcme}>
						<span className="icon-coms-Release"/>&nbsp;&nbsp;<span>{getLabel(114, "发布")}</span>
					</Button>
				</span>
                        <span className="wea-rich-text-toolbar-bottom-item" style={{position: "relative","float": "right","line-height": 30,right:40,"padding":"9px 0 0 0"}}>
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@i69j9s`} className="ddddddddddddd" disabled={disabled}  onClick={this.saveBlogNoteEcme} >
                  <span>{getLabel(384355,'存草稿') }</span>
                </Button>
                 </span>
                    </div>
                </div>
            </div>
        )
    }
}

export default WeiboEcmeEdit